<template>
  <tab-bar>
      <tab-bar-item path='/home' activeColor="#1296db">
        <img src="~assets/images/tabBar/home.png" alt="" slot="item-icon" />
        <img src="~assets/images/tabBar/home-active.png" alt="" slot="item-icon-active" />
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path = '/cart' activeColor="#1296db">
        <img src="~assets/images/tabBar/cart.png" alt="" slot="item-icon"/>
        <img src="~assets/images/tabBar/cart-active.png" alt="" slot="item-icon-active" />
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path='/category' activeColor="#1296db">
        <img src="~assets/images/tabBar/category.png" alt="" slot="item-icon"/>
        <img src="~assets/images/tabBar/category-active.png" alt="" slot="item-icon-active" />
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path='/profile' activeColor="#1296db">
        <img src="~assets/images/tabBar/profile.png" alt="" slot="item-icon" />
        <img src="~assets/images/tabBar/profile-active.png" alt="" slot="item-icon-active" />
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
</template>

<script>
import TabBar from '../common/tabbar/TabBar';
import TabBarItem from "../common/tabbar/TabBarItem";
export default {
    name: 'TabBarIndex',
    components: {
    TabBar,
    TabBarItem,
  },
}
</script>

<style scoped>

.tab-bar{
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
  }
</style>